{% extends 'base.html' %}
{% block title %}发布详情{% endblock %}
{% block content %}
<style type="text/css">
    body {
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
        margin: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        background-color: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    thead {
        background-color: #007bff;
        color: white;
    }

    th, td {
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid #dee2e6;
        vertical-align: middle;
    }

    tr:hover {
        background-color: #f1f1f1;
    }

    @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }
        th {
            display: none;
        }
        tr {
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        td {
            text-align: right;
            padding-left: 50%;
            position: relative;
        }
        td::before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            width: calc(50% - 20px);
            padding-left: 10px;
            text-align: left;
            font-weight: bold;
        }
    }
</style>

<table>
    <thead>
        <tr>
            <th>username</th>
            <th>bookname</th>
            <th>price</th>
            <th>major</th>
            <th>grade</th>
            <th>qq</th>

            <th>type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="username">{{ request.session.user_name }}</td>
            <td data-label="bookname">{{ bookname }}</td>
            <td data-label="price">{{ price }}</td>
            <td data-label="major">{{ major }}</td>
            <td data-label="grade">{{ grade }}</td>
            <td data-label="qq">{{ qq }}</td>
            <td data-label="type">{{ type }}</td>
        </tr>
    </tbody>
</table>
{% endblock %}